<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        body {
            background-color: #eee;
        }

        .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
        }

        .container {
            display: flex;
            flex-wrap: nowrap;
            justify-content: start;
            flex-direction: column;
            /* height: 850px; */

        }

        .card {
            display: flex;
            align-items: flex-end;
            margin-bottom: 5px;
            width: 300px;
            height: 80px;
            border-radius: .75rem;
            background-size: cover;
            cursor: pointer;
            overflow: hidden;
            border-radius: 2rem;
            margin: 10 0px;
            transition: all .6s;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        }

        .card>.row {
            display: flex;
            flex-wrap: nowrap;
            color: white;
        }

        .card>.row>.icon {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #233;
            color: white;
            border-radius: 50%;
            width: 50px;
            margin: 15px;
        }

        .card>.row>.description {
            display: flex;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
            height: 80px;
            width: 520px;
            opacity: 0;
            transform: translateY(30px);
            transition-duration: .3s;
            transition: all .3s ease;
        }

        .description p {
            color: #b0b0ba;
            padding-top: 5px;
        }

        .description h4 {
            /* 大写 */
            text-transform: uppercase;
        }

        input {
            display: none;
        }

        input+label {
            /* height: 400px; */
            transition: all .6s !important;
        }

        input:checked+label {
            transition: all .6s !important;
            height: 400px;
        }

        input:checked+label .description {
            opacity: 1 !important;
            transform: translateY(0px) !important;
        }

        .card[for="c1"] {
            background-image: url("./img/01.jpg");
        }

        .card[for="c2"] {
            background-image: url("./img/02.jpg");
        }

        .card[for="c3"] {
            background-image: url("./img/03.jpg");
        }

        .card[for="c4"] {
            background-image: url("./img/04.jpg");
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <input type="radio" name="slide" id="c1" value="">
            <label for="c1" class="card">
                <div class="row">
                    <div class="icon">1</div>
                    <div class="description">
                        <h4>Winter</h4>
                        <p>We took a photo together</p>
                    </div>
                </div>
            </label>
            <input type="radio" name="slide" id="c2" value="">
            <label for="c2" class="card">
                <div class="row">
                    <div class="icon">2</div>
                    <div class="description">
                        <h4>Summer</h4>
                        <p>My perfect girl</p>
                    </div>
                </div>
            </label>
            <input type="radio" name="slide" id="c3" value="">
            <label for="c3" class="card">
                <div class="row">
                    <div class="icon">3</div>
                    <div class="description">
                        <h4>Autumn</h4>
                        <p>I am your flower buyer</p>
                    </div>
                </div>
            </label>
            <input type="radio" name="slide" id="c4" value="">
            <label for="c4" class="card">
                <div class="row">
                    <div class="icon">4</div>
                    <div class="description">
                        <h4>Spring</h4>
                        <p>Her cosplay very pretty</p>
                    </div>
                </div>
            </label>
        </div>

    </div>
    </div>
</body>

</html>